<template>
	<view class="global-map">
		<map class="module-map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				curInfo: {},
				info: {},
				list: [],
				showAll: false,
				covers: [],
				curTab: 0,
				storeInfo: {},
				curId: '',
				receiverDetailAddress: '',
				background: {
					background: ''
				}

			}
		},
		onLoad(e) {
			let that=this
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res, 123123)
					that.longitude = res.longitude
					that.latitude = res.latitude

					that.getStore()
				},
				fail() {
					that.getStore()
				}
			});
		},
		onShow() {},
		methods: {
			getStore() {

				let post = {
					page: 1,
					...this.search
				}
				uni.request({
					url: '/wanlshop/index/shop',
					data: post,
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							let _list = res.res.data.data
							this.covers = []
							
							
							this.longitude = _list[0].lng
							this.latitude = _list[0].lat
							_list.some(item => {
								let i = {
									id: Number(item.id),
									width: 42,
									height: 47,
									callout: {
										content: item.shopname,
										color: '#ffffff',
										fontSize: 12,
										borderRadius: 4,
										bgColor: '#439AEC',
										padding: 4,
										display: 'ALWAYS',
									},
									latitude: Number(item.lat),
									longitude: Number(item.lng),
									iconPath: 'https://dl.nhbdic.com/admin-api/infra/file/18/get/191b65eb7bc5f7196b1ed74597d2e51538dde06a0196bbc924390da10cb7320e.png'
								}
								this.covers.push(i)
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.global-map {
		height: 100vh;
	}

	.module-map {
		width: 100%;
		height: 100%;
	}

	.module-map-select {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		right: 0;

		.content {
			background: #fff;
			border-radius: 20rpx;
			width: 700rpx;
			height: 444rpx;
			margin: 0 auto;


		}

		.map-tab {
			display: flex;

			.tab-img {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1;
				display: none;
			}

			.tab-content {
				position: relative;
				z-index: 2;
			}

			.item {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				padding: 40rpx 0 30rpx;
				position: relative;

				&.item1 {
					&.on-bg {
						// background: url('https://dianche.oss-cn-shenzhen.aliyuncs.com/map-tab1.png') no-repeat top center;
						// background-size: cover;
						color: #fff;

						.tab-img {
							display: block;
						}
					}
				}

				&.item2 {
					&.on-bg {
						// background: url('https://dianche.oss-cn-shenzhen.aliyuncs.com/map-tab2.png') no-repeat top center;
						// background-size: cover;
						color: #fff;

						.tab-img {
							display: block;
						}
					}
				}

				.line {
					display: none;
				}

				&.on {
					font-size: 34rpx;
					font-weight: bold;

					.line {
						display: block;
						margin: 10rpx auto 0;
						background: #1E93D6;
						width: 50rpx;
						height: 12rpx;
						border-radius: 50rpx;
						content: '';
						// position: absolute;
						// top: 50%;
						// margin-left: -25rpx;
					}
				}

			}
		}

		.map-content {
			padding: 30rpx 30rpx 70rpx;
		}

		.map-btn {

			width: 642rpx;
			height: 92rpx;
			display: block;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.map-input {
			border-radius: 16rpx;
			border: 1px solid #1E93D6;
			padding: 0 24rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-select {
			border-radius: 8rpx;
			border: 1px solid #999;
			color: #999;
			font-size: 24rpx;
			min-width: 100rpx;
			margin-left: 20rpx;
			padding: 10rpx 12rpx;
		}
	}
</style>